<template>
  <div>
    <div class="crumbs">
      <router-link to="/goods/recommendtopadd">
        <el-button>添加顶级推荐位分类</el-button>
      </router-link>
    </div>
    <el-tree :data="tree"
             :props="defaultProps"
             node-key="id"
             :expand-on-click-node="false"
             :render-content="renderContent">
    </el-tree>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import notify from '@/tools/notify'

  export default {
    data () {
      return {
        defaultProps: {
          children: '_child',
          label: 'name'
        }
      }
    },
    computed: {
      ...mapState({
        tree: state => state.recommend.recommendTree
      })
    },
    created () {
      this.recommendTree()
    },
    methods: {
      // 获取推荐位树
      async recommendTree () {
        let payload = {
          id: 0
        }
        await this.$store.dispatch('recommend/recommendTree', payload)
      },
      renderContent (createElement, {node, data, store}) {
        const self = this
        if (!data._child) {
          return createElement('span', {
            attrs: {
              style: 'white-space: normal; width: 100%'
            }
          }, [
            createElement('span', node.label),
            createElement('span', {
              attrs: {
                style: 'float: right; margin-right: 20px'
              }
            }, [
              createElement('el-button', {
                attrs: {
                  size: 'mini',
                  type: 'danger'
                },
                on: {
                  click: function () {
                    let payload = {
                      id: data.id
                    }
                    self.$store.dispatch('recommend/recommendDel', payload).then(res => {
                      self.recommendTree()
                      notify.success(res.msg)
                    })
                  }
                }
              }, '删除'),
              createElement('el-button', {
                attrs: {
                  size: 'mini',
                  type: 'info'
                },
                on: {
                  click: function () {
                    self.$store.commit('recommend/RECOMMEND_DATA', data)
                    self.$router.push('/goods/recommendsubadd')
                  }
                }
              }, '添加子分类'),
              createElement('el-button', {
                attrs: {
                  size: 'mini'
                },
                on: {
                  click: function () {
                    self.$router.push({name: 'RecommendSubEdit', params: {id: data.id}})
                  }
                }
              }, '编辑')
            ])
          ])
        } else {
          return createElement('span', {
            attrs: {
              style: 'white-space: normal; width: 100%'
            }
          }, [
            createElement('span', node.label),
            createElement('span', {
              attrs: {
                style: 'float: right; margin-right: 20px'
              }
            }, [
              createElement('el-button', {
                attrs: {
                  size: 'mini',
                  type: 'info'
                },
                on: {
                  click: function () {
                    self.$store.commit('recommend/RECOMMEND_DATA', data)
                    self.$router.push('/goods/recommendsubadd')
                  }
                }
              }, '添加子分类'),
              createElement('el-button', {
                attrs: {
                  size: 'mini'
                },
                on: {
                  click: function () {
                    self.$router.push({name: 'RecommendTopEdit', params: {id: data.id}})
                  }
                }
              }, '编辑')
            ])
          ])
        }
      }
    }
  }
</script>
